﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" />
    <script src="../../resources/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery.form.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <!--<script src="../../resources/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>-->
    <!--<script src="../../resources/lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>-->
    <!--<script src="../../resources/lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>-->
    <!--<script src="../../resources/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>-->
    <script src="../../resources/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script src="../../resources/lib/PersonData.js"></script>
    <script src="../../resources/lib/citylink.js"></script>
    <script type="text/javascript">

        $(function () {
            function getGridOptions(checkbox) {
                var options = {
                    columns: [
                        { display: '姓名', name: 'Name', align: 'left', width: 100, minWidth: 60 },
                        { display: '性别', name: 'Sex', minWidth: 100, width: 100 },
                        { display: '部门', name: 'Department', minWidth: 140, width: 100 },
                        { display: '职务', name: 'Job', width: 120 }
                    ], switchPageSizeApplyComboBox: false,
                    data: $.extend({}, PersonData),
                    pageSize: 30,
                    checkbox: checkbox
                };
                return options;
            }

            $("#txt2").ligerComboBox({
                width: 180,
                slide: false,
                selectBoxWidth: 500,
                selectBoxHeight: 240, valueField: 'Name', textField: 'Name'
                , grid: getGridOptions(false)
            });

            $("#cardForm").ligerForm();
            $('#cardForm').ajaxForm(function() {
                alert("card form ajax submit end!");
            });

        });
    </script>
    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    </style>
</head>
<body style="padding: 10px">
<form id="cardform" name="cardform" action="" method="post">
   <!--<div id="form1" class="liger-form">-->

            <table cellpadding="0" cellspacing="100" class="l-table-edit">
                <tr>
                    <td align="right" class="l-table-edit-td">卡类型:</td>
                    <td align="left" class="l-table-edit-td">
                        <select id="cardtype" name="cardtype">
                            <option value="">请选择卡类型</option>
                            <option value="1">身份证</option>
                            <option value="2">cpu卡</option>
                        </select>
                    </td>
                    <td align="left"></td>
                </tr>

                <tr>
                    <td align="right" class="l-table-edit-td">卡号:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="cardnumber" type="text" ltype="text" />
                    </td>
                    <td align="left"></td>
                </tr>

                <tr>
                    <td align="right" class="l-table-edit-td">生效日期:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="starttime" type="text" ltype="date" />
                    </td>
                    <td align="left"></td>
                </tr>

                <tr>
                    <td align="right" class="l-table-edit-td">失效日期:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="endtime" type="text" ltype="date" />
                    </td><td align="left"></td>
                </tr>
            <!--</table>-->
   <!--</div>-->
            <!--<table>-->
                <tr>
                    <td align="right" class="l-table-edit-td" >通行人员:</td>
                    <td align="left" class="l-table-edit-td">
                        <input type="text" id="txt2"/>
                    </td><td align="left"></td>
                </tr>
            </table>
    <br />
    <input type="submit" value="提交" class="l-button l-button-submit" />
    <input type="reset" value="重置" class="l-button l-button-reset"/>
    <br class="l-clear" />
</form>
</body>
</html>
